import React, { useState, useEffect } from 'react';
import styles from './index.module.less';
import DeclareDocFooter, { NavType } from './components/footer';
import DocCreateTemplate from './components/create-template';
import Log from './components/log';
import MatterList from '../official-doc/components/matter-list';

const DeclareDoc: React.FC<any> = (props) => {
  const [selectedNav, setSelectedNav] = useState(NavType.CREATE);
  const menuType = props.match.params.menuType;

  const getContent = (): JSX.Element => {
    console.log(selectedNav);
    switch (selectedNav) {
      case NavType.CREATE:
        return <DocCreateTemplate />;
      case NavType.LOG:
        return <Log />;
      case NavType.MATTER:
        return <MatterList />;
      default:
        return <React.Fragment></React.Fragment>;
    }
  };

  const switchMenuType = (type: string = menuType) => {
    switch (type) {
      case '1': setSelectedNav(NavType.CREATE); break;
      case '2': setSelectedNav(NavType.LOG); break;
      case '3': setSelectedNav(NavType.MATTER); break;
      default: break;
    }
  };

  useEffect(() => {
    switchMenuType();
  }, [menuType]);

  return (
    <div className={styles['wrap']}>
      {getContent()}
      <DeclareDocFooter selectedNav={selectedNav} />
    </div>
  );
};

export default DeclareDoc;